<template>
  <view class="sessiom-page">
    <view class="page-title">
      <view class="title">预约场次</view>
      <view class="msg CN_24" style="margin-top:5rpx">可预约时间：2021年11月12日-2021年11月14日</view>
    </view>
    <view class="page-day">
      <view class="CN_24">11月</view>
      <view class="day-box">
        <view class="day CN_24"
          v-for="(val,index) in bookDate"
          :key="val.date"
          @click="selectDateHandler(val,index)"
        >
          <view>{{ val.day }}</view>
          <view :class="{'date-select': selectDate === val.date,'date': true}">{{ val.date }}</view>
        </view>
      </view>
    </view>
    <view class="page-sessiom flex_center">
      <view 
        v-for="item in sessionData[selectIndex]"
        :key="item.id"
        class="sessiom-box flex_center"
        :class="{ 'sessiom-select': selectSessiom === item.id }"
        @click="selectSessiomHanlder(item)"
      >
        <text style="line-height: 1.5">{{ item.start_at.split(" ")[1].slice(0, 5) }}-{{ item.end_at.split(" ")[1].slice(0, 5) }}</text>
        <text v-if="item.rest_num === 0" style="font-size: 22rpx;line-height: 1;">预约已满</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      sessionData: [],
      bookDate: [
        {day: '周五', date: 12},
        {day: '周六', date: 13},
        {day: '周日', date: 14}
      ],
      selectDate: 12,
      selectSessiom: 0,
      selectIndex: 0
    }
  },
  mounted() {
    this.getSession();
    setTimeout(_=>{
      this.pageScrollToBottom(); 
    },1000)
  },
  onShow() {
   
  },
  methods: {
    async getSession() {
      let sessionArr = [[],[],[]];
      let res = await this.$u.api.TASAKIBOOKAPI.getSession();
      res.data.forEach(item =>{
        if (item.start_date === '2021-11-12') {
          sessionArr[0].push(item)
        } else if (item.start_date === '2021-11-13') {
          sessionArr[1].push(item)
        } else if (item.start_date === '2021-11-14') {
          sessionArr[2].push(item)
        }
      })
      this.sessionData = sessionArr;
    },
    selectDateHandler(item,index) {
      this.selectDate = item.date
      this.selectIndex = index;
      this.selectSessiom = 0;
    },
    selectSessiomHanlder(item) {
      if (item.rest_num > 0) {
        this.selectSessiom = item.id
      }
    },
    pageScrollToBottom: function() {
        wx.createSelectorQuery().select('.sign-up-page').boundingClientRect(function(rect){
        console.log(rect,'rect')
        // 使页面滚动到底部
        wx.pageScrollTo({
          scrollTop: rect.bottom
        })
      }).exec()
    }
  }
}
</script>

<style lang="scss" scoped>
  .sessiom-page {
    margin-top:-30rpx;
    padding-bottom: 50rpx;
    .page-title {
      padding-bottom: 40rpx;
      border-bottom: 1px solid #adadae;
      .title {
        font-family: GillSans;
        font-weight: 600;
        font-size: 33rpx;
      }
      .msg {
        margin-top: 18rpx;
      }
    }
    .page-day {
      padding: 40rpx 0;
      border-bottom: 1px solid #adadae;
      .day-box {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .day {
          text-align: center;
          margin-right: 40rpx;
        }
        .date {
          width: 55rpx;
          height: 55rpx;
          text-align: center;
          line-height: 55rpx;
          margin: 15rpx 0;
        }
        .date-select {
          background-color: #000;
          border-radius: 50%;
          color: #fff;
        }
      }
    }
    .page-sessiom {
      padding: 40rpx 0;
      flex-wrap: wrap;
      .sessiom-box {
        width: 190rpx;
        height: 88rpx;
        text-align: center;
        font-size: 26rpx;
        line-height: 33rpx;
        color: #adadae;
        border: 1px solid #adadae;
        margin: 15rpx;
        flex-flow: column;
        &:nth-child(1) {
          margin-left: 0;
        }
        &:nth-child(3) {
          margin-right: 0;
        }
      }
      .sessiom-select {
        color: #000;
        border: 1px solid #000;
      }
    }
  }
  
</style>